
<!DOCTYPE html>
<!-- saved from url=(0038)http://c.tsz90.com/home/posts/add.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>发布帖子</title>
    <link href="/css/reset_5.css" rel="stylesheet" type="text/css">
    <link href="/css/style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/jquery.min.js.下载"></script>
    <link rel="stylesheet" href="/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/css/new_page.css">


    <link href="/css/new_style.css" rel="stylesheet" type="text/css">

    <!-- 弹出层 -->
    <link rel="stylesheet" href="/css/dialog.css">
    <script src="/css/zepto.min.js.下载"></script>
    <script src="/js/dialog.js.下载"></script>
    <!-- 弹出层 -->
    <script type="text/javascript" src="/js/global.js.下载"></script>
    <style type="text/css">
        .new-header .dowm-btn {
            bottom: 0;
        }
        .new-header .back {
            bottom: 18px;
        }
        .images-box{
            display: flex;
            display: -webkit-flex;
            flex-flow: wrap;
            margin-bottom: 10px;
        }
        .images-box .item{
            margin-right: 5px;
            margin-bottom: 5px;
            width: 100px;
            height: 100px;
            position: relative;
        }
        .images-box .item input{
            position: absolute;
            z-index: 3;
            opacity: 0;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        .images-box .item span{
            display: block;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 60px;
        }
        .images-box .img-item img{
            width: 100%;
            height: 100%;
        }
        .fabu{
            width: 60px;
            height: 40px;
            background: #FF481C;
            border-radius: 90px;
            line-height: 34px;
            text-align: center;
        }
        .ssss{
            -webkit-appearance: none;
            border: 0;
            padding: 5px;
            text-align: right;
            direction: rtl;
            padding-right: 20px;
        }
    </style>
    <link rel="stylesheet" href="/css/layer.css" id="layuicss-layer"></head>

<body>
<div class="site-header header-fixed">
    <a onclick="history.back()" class="back"></a>
    <div class="tit-name">发布帖子</div>
</div>
<div class="new-add-task">
    <form action="/admin/index/do_luntan" enctype="multipart/form-data" method="post" id="form">
        <div class="task">


            <div class="task-item">
                <span class="new-add-task-label"><span style="color:red">*&nbsp;</span>标题：</span>
                <input type="text" name="title" id="title" class="task-txt new-add-task-content" placeholder="请输入帖子标题" value="">

            </div>
            <div class="task-item" id="url-item">
                <span class="new-add-task-label"><span style="color:red">*&nbsp;</span>分类：</span>
                <select name="type" style="display:inline;" class="ssss">
                    {foreach $data as $k =>$v}
                    <option value="{$v.id}">{$v.cardtype}</option>
                    {/foreach}
                </select>
            </div>
            <div class="task-item">
                <span class="new-add-task-label"><span style="color:red">*&nbsp;</span>详情：</span>
                <textarea class="shuoming new-add-task-content" id="content" name="content" placeholder="请输入帖子详情"></textarea>
            </div>


            <div class="task-item"><span style="color:red">*&nbsp;</span>图片(最多上传9张图片)：</div>
            <div class="task-item">
                <div class="images-box">

                    <div class="item">
                        <span id="uploadForm"></span>
                    </div>
                </div>
                <div class="files" style="display: none">
                    <input type="file" accept="image/*" name="thumbs[]">
                </div>
            </div>


        </div>


        <div class="member-btn">
            <button type="button" class="button1 js-bind" onclick="check()">添加帖子</button>
        </div>
    </form>

</div>

<script type="text/javascript" src="/js/layer.js.下载"></script>
<script type="text/javascript" src="/js/public.js.下载"></script>
<script type="text/javascript">

    function check(){
        var title = $('#title').val();
        if(!title){
            console.log(1)
            layer.msg('请填写标题！');
            return false;
        }
        var content = $('#content').val();
        if(!content){
            console.log(2)
            layer.msg('请填写详情！');
            return false;
        }
        $('#form').submit();
    }



    //点击图片上传
    $('.images-box .item').last().click(function(){

        var a = document.getElementsByClassName('images-item');
        if(a.length==9){
            myalert("图片最多上传9张哦！");
            return false;
        }
        //点击选择图片
        $('.files input[type="file"]:first').click().bind('change',function(){
            if(this.files.length > 0){
                var src = getFileSrc(this.files[0]);
                $('.images-box').prepend('<div class="item img-item"><img class="images-item" src="'+src+'"></div>');
                //向.files的div中添加input，已经选择了一个，将这个保留，新增一个新的input作为补充
                $('.files').prepend('<input type="file" accept="image/*" name="thumbs[]">');
            }
            if(a.length==9){
                var ui =document.getElementById("uploadForm");
                ui.style.display="none";//display为空的话会好使，为block会使后边的空间换行
            }
        });
    });

    //点击图片删除对应的移除input
    $(document).on('click','.images-item',function (event) {
        var index = $('.images-item').index(this);
        $(this).parent().remove();
        //第一个是新添加的，所以要删除第二个
        $('.files input:first').next().remove();
        event.stopPropagation();
    });


    /* 获取元素路径 */
    function getFileSrc(file){
        var url = null;
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file)
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file)
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file)
        }
        return url;
    }




</script>






</body></html>